<template>
  <view class="class-info">
    <view class="class-name">{{ classData.name }}</view>
    <view class="class-detail">
      <text class="class-location">{{ classData.location }}</text>
      <text class="class-time">{{ classData.time }}</text>
    </view>
  </view>
</template>
<script>
export default {
  name: 'ClassInfo',
  props: {
    classData: {
      type: Object,
      required: true
    }
  }
}
</script>
<style>
.class-info {
  background-color: #F8F8FB;
  border-radius: 20rpx;
  padding: 20rpx;
  width: 100%;
  box-sizing: border-box;
  margin-top: 20rpx;
}
.class-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 10rpx;
}
.class-detail {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.class-location {
  font-size: 28rpx;
  color: #999999;
  /* 移除溢出处理相关属性 */
  /* overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; */
}
.class-time {
  font-size: 28rpx;
  color: #999999;
  text-align: right;
  min-width: 140rpx;
}
</style>